<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <script src="./js/axios.min.js"></script>
    <style>
         .login{width: 1536px;height: 712.5px;}
         .head{width: 1536px;height: 48px;background-color: rgb(240, 161, 161);}
         .head img{float: left;margin-left: 130px;width: 135px;height: 40px;margin-top: 4px;}
         .head li{float: right;font-size: 12.2px;width: 85px;height: 40px;text-align: center;line-height: 48px;}
         .head li a{color: rgb(102, 58, 58);}
         .head li a:hover{color: rgb(241, 15, 15);}
         .head li:nth-child(1){margin-right: 135px;}
         #main{width: 600px;height: 468px;margin: 80px auto;}
         #main h1{text-align: center;margin-bottom: 30px;}
         #main input{outline: none;text-indent: 1em;}
         #list1{width: 420px;height: 50px;border-bottom: 2px rgb(189, 187, 187) solid;margin: 0 auto;margin-bottom: 20px;}
         #list1 li{float: left;width: 140px;height: 50px;text-align: center;line-height: 60px;color: rgb(189, 188, 188);}
        /*  #list1 li:hover{border-bottom: 2px red solid;} */
         .first input{width: 420px;height: 45px;margin-top:20px;margin-left: 90px;border-radius: 5px;border: 0.5px solid black;}
         .first input:nth-child(4){background-color: rgb(240, 161, 161);color: white;font-size: 18px;border: none;}
         .list2{width: 420px;height: 50px;margin: 0 auto;}
         .list2 li{float: right;width: 70px;height: 40px;text-align: center;line-height: 60px;}
         .list2 li:nth-child(1){float: left;}
         .list2 a{color: blue;font-size: 14px;}
         #main div{display: none;}
         .second input:nth-child(1){width: 156px;height: 45px;margin-top:20px;margin-left: 90px;border-radius: 5px;border: 0.5px solid black;}
         .second input:nth-child(2){width: 256px;height: 45px;margin-top:20px;border-radius: 5px;border: 0.5px solid black;}
         .second input:nth-child(4){width: 420px;height: 45px;margin-top:20px;margin-left: 90px;border-radius: 5px;border: 0.5px solid black;}
         .second input:nth-child(5){width: 420px;height: 45px;margin-top:20px;margin-left: 90px;background-color: rgb(252, 116, 116);color: white;font-size: 18px;border: none;}
          .third{position: relative;}
         .third input:nth-child(1){width: 156px;height: 45px;margin-top:20px;margin-left: 90px;border-radius: 5px;border: 0.5px solid black;}
         .third input:nth-child(2){width: 256px;height: 45px;margin-top:20px;border-radius: 5px;border: 0.5px solid black;}
         .third input:nth-child(4){width: 420px;height: 45px;margin-top:20px;margin-left: 90px;border-radius: 5px;border: 0.5px solid black;}
         .third input:nth-child(6){width: 420px;height: 45px;margin-top:20px;margin-left: 90px;background-color: rgb(252, 116, 116);color: white;font-size: 18px;border: none;}
         .third span{position: absolute;top: 98px;right: 92px;}
         .third a{color: blue;font-size: 13px;}

         .foot{width: 1536px;height: 37px;background-color: rgb(238, 238, 238);}
         .foot p{text-align: center;line-height: 37px;font-size: 12px;color: rgb(146, 144, 144);}
         .foot span{margin-left: 70px;}
         .foot a{color: blue;}
         .foot a:hover{text-decoration: underline;}
    </style>
</head>
<body>
    <div class="login">
           <div class="head">
                <ul>
                    <li><a href="">简体中文(中国)</a></li>
                    <li><a href="file:///C:/Users/LENOVO/Desktop/e-pet-website/index.html">回到首页</a></li>
                    <li><a href="">联系我们</a></li>
                </ul>
           </div>
           <div id="main">
                 <h1>Uniportal账号登录</h1>
                 <ul id="list1">
                     <li style="color: darkred;">账号/邮箱登录</li>
                     <li>手机号码登录</li>
                     <li>短信登录</li>
                 </ul>
                <div class="first" style="display: block;">
                 <input type="text" placeholder="Uniportal账号/邮箱/W3账号"><br>
                 <input type="password" placeholder="密码">
                 <input type="button" value="登录">
                 <ul class="list2">
                     <li><a href="file:///C:/Users/LENOVO/Desktop/e-pet-website/item.html">立即注册</a></li>
                     <li><a href="">忘记密码</a></li>
                     <li><a href="">修改密码</a></li>
                 </ul>
                </div>
                <div class="second">
                    <input type="text" placeholder="中国大陆(+86)">
                    <input type="text" placeholder="手机号"><br>
                    <input type="password" placeholder="密码">
                    <input type="button" value="登录">
                    <ul class="list2">
                        <li><a href="">立即注册</a></li>
                        <li><a href="">忘记密码</a></li>
                        <li><a href="">修改密码</a></li>
                    </ul>
                </div>
                <div class="third">
                    <input type="text" placeholder="中国大陆(+86)">
                    <input type="text" placeholder="手机号"><br>
                    <input type="password" placeholder="短信验证码"><span><a href="">短信验证码</a></span>
                    <input type="button" value="登录">
                    <ul class="list2">
                        <li><a href="">立即注册</a></li>
                        <li><a href="">忘记密码</a></li>
                        <li><a href="">修改密码</a></li>
                    </ul>
                   </div>
           </div>
           <div class="foot">
             <p>版权所有&copy;E宠有限公司。 1998-2022 保留一切权利。 粤A2-20044005号<span><a href="">隐私声明</a></span></p>
           </div>
    </div>
    <script>
        
        let divs = document.querySelectorAll('#main div');
        let lis = document.querySelectorAll('#list1 li');
        lis.forEach(function(v,i){
          v.onclick = function(){
              lis.forEach(function(vLis){
                  vLis.style.color = "";
              })
              v.style.color = "darkred";

              divs.forEach(function(vDivs){
                 vDivs.style.display = "none";
              })
              divs[i].style.display = "block";


          }
        })
        
              
        
              
    </script>
    <script>
        let ipts = document.querySelectorAll(".first input");
             ipts[2].onclick=function(){
                 let  username = ipts[0].value;
                 let  password = ipts[1].value;

                 let loginAPI = "http://jx.xuzhixiang.top/ap/api/login.php";
                 axios.get(loginAPI,{params:{username:username,password:password}})
                 .then((r)=>{
                     console.log(r.data);
                     alert(r.data.msg);
                     if(r.data.code == 1){
                         let {id,token,username} = r.data.data;
                         localStorage.setItem("id",id);
                         localStorage.setItem("token",token);
                         localStorage.setItem("username",username);
                         location.href ="index.html"
                     }
                 })
             }
    </script>
</body>
</html>